<template>
  <view>
    <u-navbar
      :background="{ background: 'transparent' }"
      back-icon-color="#fff"
      title-color="#fff"
      title-size="36"
      title="售后详情"
      :is-back="true"
      :border-bottom="false"
    >
    </u-navbar>
    <view class="" style="position: relative">
      <view
        class="contentBg"
        :style="{
          paddingTop: `${statusBarHeight + navbarHeight}px`,
          backgroundImage: `url(${getImageUrl('return-order-bg.png')})`,
          height: `${224 + statusBarHeight}px`,
          top: `-${statusBarHeight + navbarHeight}px`
        }"
      >
      </view>
    </view>
    <view class="card">
      <u-cell-group class="">
        <u-cell-item :arrow="false">
          <u-steps :list="numList" active-color="#10A28F" mode="number" :current="step"></u-steps>
          <view class="steps-tip">
            <text> {{ stepDes1 }}</text>
            <text></text>
            <text></text>
            <text></text>
          </view>
        </u-cell-item>
      </u-cell-group>
      <view class="step-des"> 注：退款完成后，退款金额按原支付路径返回！！！ </view>
    </view>
    <scroll-view :scroll-y="true">
      <view class="layoutView" style="position: relative">
        <view class="layoutText">商品信息</view>
        <view class="order-goods" v-for="(item2, index) in goodsList" :key="index">
          <u-image
            class="goods-img"
            border-radius="8"
            :src="item2.picUrl"
            width="160rpx"
            height="160rpx"
          ></u-image>
          <view class="orde-riget" style="flex: 1">
            <view class="goods-title">
              <text>{{ item2.spuName }}</text>
            </view>
            <view class="goods-speci">
              <text v-if="item2.properties && item2.properties.length > 0">{{
                item2.properties[0].valueName
              }}</text>
              <text class="goods-num">x{{ item2.count }}</text>
            </view>
            <view class="goods-price">
              <text
                class="goods-refund"
                v-if="
                  refundInfo.status === 10 || refundInfo.status === 20 || refundInfo.status === 30
                "
              >
                退款进行中
              </text>
              <text class="goods-refund" v-else-if="refundInfo.status === 40"> 等待平台退款 </text>
              <text class="goods-refund" v-else-if="refundInfo.status === 50"> 退款成功 </text>
              <text class="goods-refund" v-else> 已终止退款</text>
            </view>
          </view>
        </view>
        <view style="margin-top: 20rpx"></view>
        <u-line color="#E3E4E6"></u-line>
        <view class="moneyView dis-flex flex-y-center flex-y-between">
          <text class="flex-1">数量：{{ productCount }}</text>
          <view>
            <text>实付：</text>
            <text style="color: #fa453c">¥{{ (refundInfo.payPrice * 0.01).toFixed(2) }} </text>
          </view>
        </view>
      </view>
      <view class="layoutView" v-if="refundInfo">
        <view class="orderTitle">退款信息</view>
        <view class="orderText">交易单号：{{ refundInfo.orderNo }}</view>
        <view class="orderText">售后单号：{{ refundInfo.no }}</view>
        <view class="orderText">
          <text>申请金额：</text>
          <text style="color: red">¥{{ (refundInfo.refundPrice * 0.01).toFixed(2) }}</text>
        </view>
        <view class="orderText">申请原因：{{ refundInfo.applyReason || '无' }}</view>
        <view class="orderText">申请描述：{{ refundInfo.applyDescription || '无' }}</view>
        <view class="orderText"
          >申请时间：{{ $u.timeFormat(refundInfo.createTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="step === 3"
          >退款时间：{{ $u.timeFormat(refundInfo.refundTime, 'yyyy年mm月dd日 hh时MM分') }}
        </view>
        <view class="orderText" v-if="refundInfo.applyPicUrls && refundInfo.applyPicUrls.length > 0"
          >申请图片：
        </view>
        <view
          class="orderText"
          v-if="refundInfo.applyPicUrls && refundInfo.applyPicUrls.length > 0"
          style="display: flex; flex-wrap: wrap"
        >
          <u-image
            class="picBox"
            border-radius="10"
            v-for="img in refundInfo.applyPicUrls"
            :src="img"
            :key="img"
            width="150rpx"
            height="150rpx"
          ></u-image>
        </view>
      </view>
      <u-gap height="200"></u-gap>
    </scroll-view>
    <view class="footer-box">
      <view class="bottomView">
        <text class="hollow-btn btn" @click="$utils.goToUserCenter()">个人中心 </text>
        <text class="hollow-btn btn" v-if="refundInfo.sellerPhone" @click="onCallSellerPhone()"
          >联系卖家
        </text>
        <text class="warning-btn btn" v-if="refundInfo.status === 10" @click="onOrderRefundCancel()"
          >取消申请
        </text>
      </view>
    </view>

    <PayPopup :show="show" :payOrderId="payOrderId" :resStatus="resStatus">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ realPay }}
      </p>
    </PayPopup>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
import PayPopup from '@/components/PayPopup.vue'
import { BASE_URL, UP_URL } from '@/common/config'

export default {
  components: {
    PayPopup
  },
  data() {
    return {
      statusBarHeight: systemInfo.statusBarHeight,
      stepDes1: '',
      stepDes2: '',
      stepDes3: '',
      stepDes4: '',
      step: 0,
      show: false,
      show2: false,
      orderId: '',
      resStatus: '',
      payOrderId: '',
      realPay: '',
      fileList: [],
      starNum: [1, 2],
      starNum2: [1, 2, 3],
      goodsList: [],
      leval: '',
      form: {
        content: '',
        scores: 5,
        orderId: null,
        picUrls: []
      },
      action: BASE_URL + UP_URL,
      height: 0,
      numList: [
        {
          name: '发起申请'
        },
        {
          name: '商家审核'
        },
        {
          name: '平台审核'
        },
        {
          name: '退款完成'
        }
      ],
      refundInfo: {}
    }
  },

  onLoad(res) {
    this.orderId = res.id ? res.id : '0'
    if (this.starNum.length < 2) {
      this.leval = '差'
    } else if (this.starNum.length < 4) {
      this.leval = '一般'
    } else {
      this.leval = '优秀'
    }
  },
  onShow() {
    this.initData()
  },
  computed: {
    productCount: function () {
      let count = 0
      this.goodsList.forEach((item) => {
        count += item.count
      })
      return count
    },
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    formatCode(code) {
      return code
        .replace(/\s/g, '')
        .replace(/[^\d]/g, '')
        .replace(/(\d{3})(?=\d)/g, '$1 ')
    },
    initData() {
      let self = this
      self.$u
        .get('/app-api/trade/after-sale/get-by-order', {
          orderId: this.orderId
        })
        .then((res) => {
          self.refundInfo = res.data
          self.goodsList = res.data.skus
          if (self.refundInfo.status == 10) {
            // 买家申请退款
            self.step = 0
          } else if (self.refundInfo.status == 20) {
            // 卖家同意退款
            self.step = 1
          } else if (self.refundInfo.status == 40) {
            // 等待平台退款
            self.step = 2
          } else if (self.refundInfo.status == 50) {
            // 退款成功
            self.step = 3
          }
        })
    },
    onLocation(store) {
      uni.openLocation({
        latitude: Number(store.address_lat),
        latitude: Number(store.address_lng),
        success() {}
      })
    },
    onCallPhone(store) {
      uni.makePhoneCall({
        phoneNumber: store.phone,
        fail(res) {
          uni.$u.toast(JSON.stringify(res))
        }
      })
    },
    onComment() {
      this.show2 = true
    },
    onCopy(number) {
      let self = this
      uni.setClipboardData({
        data: number,
        success: function () {
          self.$u.toast('复制成功')
        }
      })
    },

    onOrderCancel() {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消售后吗？', () => {
        self.$u
          .post('/app-api/trade/order/cancel', {
            id: this.orderId
          })
          .then((res) => {
            if (res.code === 0) {
              self.$u.toast('取消成功')
              setTimeout(function () {
                self.onOrderLoad(self.current, null, true)
              }, 500)
            } else {
              self.$u.toast(res.msg)
            }
          })
      })
    },
    onCallSellerPhone() {
      let self = this
      // #ifdef H5
      uni.showToast({
        icon: 'none',
        title: 'H5不支持拨打电话'
      })
      // #endif
      // #ifndef H5
      uni.makePhoneCall({
        phoneNumber: self.refundInfo.sellerPhone
      })
      // #endif
    },
    onOrderRefundCancel() {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消售后吗？', () => {
        self.$u
          .post('/app-api/trade/after-sale/cancel-by-order?orderId=' + this.orderId, {
            orderId: this.orderId
          })
          .then((res) => {
            if (res.code === 0) {
              self.$u.toast('取消成功')
              setTimeout(function () {
                self.onOrderLoad(self.current, null, true)
              }, 500)
            } else {
              self.$u.toast(res.msg)
            }
          })
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import url('@/style/btn.css');
@import url('./order-details.css');

.picBox {
  margin-right: 23rpx;
  margin-top: 20rpx;
}

.picBox:nth-child(4n) {
  margin-right: 0;
}

page {
  background: #f2f2f2;
}

.submit-btn {
  width: 94%;
}

.right {
  width: 150rpx;
  height: 60rpx;
  border-radius: 30rpx;
  border: 1px solid #e6e6e6;
  line-height: 60rpx;
  color: #666666;
  text-align: center;
}

.store-info {
  margin-bottom: 20rpx;

  .store-left {
    font-size: 30rpx;

    .store-add {
      font-size: 24rpx;
      color: #666666;
    }
  }
}

.order-code {
  font-weight: 600;
  font-size: 36rpx;
  color: #333333;
}

.slot-btn {
  width: 200rpx;
  height: 200rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  // height: 448rpx;
}

.steps-tip {
  display: flex;
  justify-content: space-around;
  font-size: 20rpx;
}

.card {
  width: calc(100% - 40rpx);
  margin: 20rpx 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
  position: relative;
  z-index: 999;
}

.step-des {
  width: 100%;
  background: #ffe2e0;
  border-radius: 0 0 10rpx 10rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #fa453c;
  line-height: 48rpx;
  padding: 20rpx;
  position: relative;
}

::v-deep.u-cell-item-box {
  border-radius: 10rpx !important;
}

// .u-cell-box{
// 	border-radius: 10rpx;
// }
</style>
